
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<title>vue-router动态路由匹配</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:30rem;
				min-height:5rem;
				border:0.1rem solid black;
			    margin:3rem auto;
			}
			#link{
				display:flex;
			}
			.link{
				display:block;
				flex:1;
				height:2rem;
				line-height:2rem;
				text-decoration:none;
				color:#666;
				text-shadow:0.2rem 0.2rem 0.2rem #FFFF00;
			}
			.link:hover{
				color:red;
				font-weight:bold;
			}
			span{
				color:red;
				font-weight:bold;
			}
			.zujian{
				width:100%;
				background-color:black;
				color:white;
				height:60px;
				line-height:60px;
				text-align:center;
			}
		</style>
		<style>
			@media (min-width:1000px) {
				html{
					font-size:20px;
				}
			}
			@media (min-width:500px) and (max-width:1000px) {
				html{
					font-size:16px;
				}
				
			}
			@media (max-width:500px) {
				html{
					font-size:12px;
				}
				#app{
					width:auto;
					height:auto;
					margin:0;
				}
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div id="link">
				<router-link to="/user/1" class="link">User1</router-link>
				<router-link to="/user/2"  class="link">User2</router-link>
				<router-link to="/user/3"  class="link">User3</router-link>
				<router-link to="/user/4"  class="link">User4</router-link>
				<router-link to="/user/5"  class="link">User5</router-link>
				<router-link to="/register"  class="link">Register</router-link>
			</div>
			
			<hr>
			<router-view></router-view>
		</div>
		
		<script src="Vue.js"></script>
		<script src="vue-router.js"></script>
		<script>
			/* 
			 vue-router动态路由匹配
			 应用场景:通过动态路由参数的模式进行路由匹配
			 var router = new VueRouter({
				 routes:[
					 //动态路径参数，以冒号开头
					 {path:"/user/:id",component:User}
				 ]
			 })
			 
			 const User = {
				 //路由组件中通过$route.params获取路由参数
				 template:`<div>User{{$route.params.id}}</div>`
			 }
			 */
			const User = {
				template:`<div class="zujian">User---(当前用户<span> ID : {{$route.params.id}} </span>)---路由组件内容区域</div>`
			}
			const Register = {
				template:`<div class="zujian">Register路由组件内容区域</div>`
			}
			
			let router = new VueRouter({
				routes:[
					{
						path:"/user/:id",
						component:User
					},
					{
						path:"/register",
						component:Register
					}
				]
			})
			
			let vm = new Vue({
				el:"#app",
				data:{},
				router:router
			})
		</script>
	</body>
</html>
